<!DOCTYPE html>
<html lang="zh-CN">
<head>
{% block head1%}
<title>网站名字</title>
{% endblock %}
{% load static %}
{% block head%}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">

<link rel="stylesheet" href="/static/dist/css/adminlte.css">
<link rel="stylesheet" href="/static/dist/css/all.min.css">
<link rel="stylesheet" href="/static/dist/css/1.css">
<link rel="stylesheet" href="/static/dist/css/bulma.min.css">

<script src="/static/plugins/jquery/jquery.js"></script>
<script src="/static/dist/js/adminlte.js"></script>


{% endblock %}

</head>

<body class="layout-top-nav">

<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-dark" style="background-color: black;">
    <div class="container" style="background-color: black;">
      <div class="collapse navbar-collapse order-3" id="navbarCollapse">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
          <li class="nav-item d-none d-sm-inline-block">
           <a href="/" class="navbar-brand" >
            <span class="brand-text font-weight-light" style="co">网站名字</span>
           </a>
          </li>
          <li class="nav-item d-none d-sm-inline-block">
            <a href="/" class="nav-link">首页</a>
          </li>
          <li class="nav-item d-none d-sm-inline-block">
            <a href="/video" class="nav-link">视频</a>
          </li>
          <li class="nav-item d-none d-sm-inline-block">
            <a href="/video_upload" class="nav-link">上传视频</a>
          </li>
            </ul>


        <!-- SEARCH FORM -->
        <form action='/search' method="get" class="form-inline ml-0 ml-md-3">
          <div class="input-group input-group-sm">
            <input name="keywords" class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="navbar-item is-hidden-mobile px-0" v-if="isGuest">
    {% if request.user.is_authenticated %}
    <button class="button is-black p-3" @click="login">
        <span class="icon"><i class="fas fa-sign-in-alt"></i></span>
         <a href="{% url 'user_out' %}" class="small-box-footer">退出登录</a>
    </button>
    {% endif %}
    {% if not request.user.is_authenticated %}
    <button class="button is-black p-1" @click="login" >
        <span class="icon"><i class="fas fa-sign-in-alt"></i></span>
        <a href="{% url 'user_login' %}" class="small-box-footer">登录</a>
    </button>

    <button class="button is-black p-1" @click="register">
        <span class="icon"><i class="fd0235 fas fa-user-plus"></i></span>
        <a href="{% url 'user_reg' %}" class="small-box-footer">注册</a>
    </button>
    {% endif %}

    </div>
</nav>
</div>


<main class="container my-3" id="main">
{% block main%}
<div class="container">
    <div class="block">
        <h2 class="has-text-weight-bold">最新</h2>
    </div>
    <div class="columns is-multiline is-mobile is-variable is-2-tablet is-1-mobile" id="rd6">


        {%for video in obj%}
        <div class="column is-one-quarter-tablet is-half-mobile py-1">
            <article class="card is-shadowless">
                <div class="card-image is-clipped" >
                    <a href="/video/view/{{ video.id }}">
                        <figure class="image is-5by3 is-relative">
                            <img loading="lazy" alt="{{ video.name }}" src="/media/{{ video.picture }}" >
                        </figure>
                        <span class="duration">00:04:41</span>
                    </a>
                </div>
                <div class="card-content px-0 py-2">
                    <div class="content">
                        <h4 class="is-size-7 is-size-7-mobile mb-1 has-text-line-2 has-text-weight-normal">
                            <a target="_self" href="/video/view/{{ video.id }}" class="has-text-grey-dark">
                                {{ video.name }}
                            </a>
                        </h4>
                        <p class="mb-1 has-text-grey is-size-8">
                            作者: <a class="has-text-grey-dark" href="{{ 作者主页 }}">{{ video.user }}</a>
                        </p>
                        <p class="has-text-grey is-size-8">
                            <time datetime="{{ video.createdate }}">{{ video.createdate|date:"Y年m月d日" }}</time>&nbsp;|&nbsp;{{ video.click_num }}次播放
                        </p>
                    </div>
                </div>
            </article>
        </div>
        {%endfor%}
    </div>
</div>
{% endblock %}
</main>


    <!-- jQuery UI 1.11.4 -->
    <script src="/static/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <!-- Bootstrap 4 -->
    <script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- ChartJS -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Sparkline -->
    <script src="/static//plugins/sparklines/sparkline.js"></script>
    <!-- JQVMap -->
    <script src="/static/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="/static/plugins/jqvmap/maps/jquery.vmap.world.js"></script>
    <script src="/static/plugins/jquery-knob/jquery.knob.min.js"></script>
    <!-- AdminLTE App -->

    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="/static/dist/js/pages/dashboard.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/static/dist/js/demo.js"></script>

<footer class="footer has-background-black" style="">
    <div class="content has-text-centered">
        <p>
            <a class="has-text-white" href="">条款</a>｜
            <a class="has-text-white" target="_blank" href="">联系</a>
        </p>
        <p class="text-center has-text-white">Copyright © 2024 mjd All Rights Reserved.</p>
    </div>
</footer>

</body>
</html>
